<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/userCenter.css">
  <title>个人中心</title>
</head>

<body class="userCenter page-group">
  <div class="page">
    <!-- //<header class="bar bar-nav" id="golbalHeader"></header> -->

    <!-- 这里是页面内容区 -->
    <div class="content">
      <div class="userInfoAll flex-box justify-content--around">
        <div class="balance flex-box ">
          <p class="label">余额</p>
          <p class="value">&nbsp;</p>
          <a href="javascript:;" onclick="userCenter.wechatPay()" class="button button-success button-fill">充值</a>
        </div>
        <div class="userInfo flex-box">
          <div class="headImg">
            <img alt="">
          </div>
          <div class="infoDetail">
            <p class="name">
              &nbsp;
            </p>
            <p class="recommendCode">
              推荐码: <span></span>  
            </p>
            <p class="level">
              &nbsp;
            </p>
          </div>
        </div>
        <div class="jifen flex-box">
          <p class="label">次卡</p>
          <p class="value">&nbsp;</p>
          <a href="./productList.html" class="button button-success button-fill">购买</a>
        </div>
      </div>
      <div class="order">
        <div class="content-block-title">我的订单
          <a href="./orderInfo.html" style="float:right">查看更多>></a>
        </div>
        <div class="card-content">
          <div class="list-block media-list">
            <ul class="orderList">

            </ul>
          </div>

        </div>
      </div>
      <div class="myList">
        <div class="list-block">
          <ul>
            <a href="./info.html" style="display:block;color:rgb(61, 65, 69);">
              <li class="item-content item-link">
                <div class="item-media">
                  <i class="icon icon-f7"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">信息编辑</div>
                </div>
              </li>
            </a>
            <a href="./changePhone.html" style="display:block;color:rgb(61, 65, 69);">
              <li class="item-content item-link">
                <div class="item-media">
                  <i class="icon icon-f7"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">修改手机</div>
                </div>
              </li>
            </a>
            <a href="./myProduct.html" style="display:block;color:rgb(61, 65, 69);">
              <li class="item-content item-link">
                <div class="item-media">
                  <i class="icon icon-f7"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">我的次卡</div>
                </div>
              </li>
            </a>
            <a href="./skinList.html" style="display:block;color:rgb(61, 65, 69);">
              <li class="item-content item-link">
                <div class="item-media">
                  <i class="icon icon-f7"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">皮肤记录</div>
                </div>
              </li>
            </a>

            <a href="./myJf.html" style="display:block;color:rgb(61, 65, 69);">
              <li class="item-content item-link">
                <div class="item-media">
                  <i class="icon icon-f7"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">积分记录</div>
                </div>
              </li>
            </a>
            <a href="./balanceList.html" style="display:block;color:rgb(61, 65, 69);">
              <li class="item-content item-link">
                <div class="item-media">
                  <i class="icon icon-f7"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">余额记录</div>
                </div>
              </li>
            </a>
            <a href="./myRecommend.html" style="display:block;color:rgb(61, 65, 69);">
              <li class="item-content item-link">
                <div class="item-media">
                  <i class="icon icon-f7"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">我的推荐</div>
                </div>
              </li>
            </a>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <nav class="bar bar-tab" id="golbalFooter"></nav>
    <div id="modal">
      <li class="item-content">
        <div class="item-media">
          <img src="" width="44">
        </div>
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title relative" style="width:100%;">
              <span class="name"></span>
              <span class="payStatus absolute">待支付</span>
            </div>
          </div>
          <div class="item-subtitle relative">
            <span class="price"></span>
            <a href="#" class="button button-big button-fill button-success payButton" onclick="userCenter.goPay(this)">去支付</a>
          </div>
        </div>
      </li>
    </div>
  </div>
  <!-- 标题栏 -->

</body>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
  var userCenter = (function ($) {
    $.init()
    var userCenter = new ST({
      golbalHeaderText: '个人中心',
      golbalHeaderFunc: function () {
        if (document.referrer.match('index')) {
          return
        } else {
          history.back()
        }
      },
      golbalFooterIndex: 2,
      getThreeOrder: {
        page: 1,
        pageSize: 3,
        status: 3
      },
      balance: ''
    })
    sessionStorage.removeItem('isLogin')
    sessionStorage.setItem('isLogin', 'userCenter')
    userCenter.goPay = function (context) {
      window.location.href = './payOnline.html?orderId=' + $(context).data('orderid')
    }

    userCenter.wechatPay = function () {
      window.location.href = './wechatPay.html?balance=' + userCenter.balance
    }
    userCenter.pushAjax({
      getUserInfo: {
        url: '/app/api/private/user/baseInfo',
        data: {

        }
      },
      wallet: {
        url: '/app/api/private/money/getMoney',
        data: {}
      },
      getThreeOrder: {
        url: '/app/api/private/order/orderList',
        data: userCenter.getThreeOrder
      },
      getProduct: {
        url: '/app/api/private/user/mineProductRemainCount',
        data: {}
      }
    })
    userCenter.pushAjaxSuccess({
      getUserInfo: function (res) {
        if (res.code === '1') {
          $('.name').text(res.data.user.name)
          $('.level').text(res.data.user.level.name)
          $('.recommendCode span').text(res.data.user.recommendCode)
          $('.headImg img').attr('src', res.data.user.headImg)
        }
      },

      wallet: function (res) {
        if (res.code === '1') {
          $('.balance .value').text('￥' + res.data.money.balance)
          userCenter.balance = res.data.money.balance
        }
      },
      getProduct: function (res) {
        if (res.code === '1') {
          $('.jifen .value').text(res.data.remainCount)
        }
      },
      getThreeOrder: function (res) {
        if (res.code === '1') {
          res.data.orderList.forEach(function (ele) {
            var li = $('#modal li').clone()
            $(li).find('.name').text(ele.name)
            $(li).find('img').attr('src', ele.service && ele.service.image || '../image/pay.png')
            $(li).find('.price').text(ele.payPrice)
            $(li).find('a').attr('data-orderid', ele.orderId)
            $(li).appendTo($('ul.orderList'))
          })
        }
      }
    })
    userCenter.http('getUserInfo')
    userCenter.http('wallet')
    userCenter.http('getThreeOrder')
    userCenter.http('getProduct')
    userCenter.render()
    return userCenter
  })($)
</script>

</html>